<template>
  <div
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    class="xxyp-image"
    :style="{ width: width, height: height }"
  >
    <ImgPreview
      ref="imgPreview"
      :src="url"
      :fit="fit"
      :preview-src-list="srcList"
      :preview-src-index="index"
      :lazy="lazy"
      @load="loading = false"
      @error="loading = false"
    />
    <div v-if="showMask" class="mask el-fade-in-linear">
      <div class="btn-preview" @click="openPreview">
        <svg-icon icon-class="zoom" />
        <span>点击预览</span>
      </div>
    </div>
    <div v-if="canDelete" class="delete" @click="handleDelete">
      <svg-icon icon-class="delete" />
      <span>删除</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    fit: {
      type: String,
      default: 'cover'
    },
    lazy: {
      type: Boolean,
      default: true
    },
    srcList: {
      type: Array,
      default: () => []
    },
    width: {
      type: String,
      default: '162px'
    },
    height: {
      type: String,
      default: '210px'
    },
    canDelete: {
      type: Boolean,
      default: false
    },
    showMask: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: true,
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down']
    }
  },
  computed: {
    // srcList() {
    //   // return [this.url]
    //   return []
    // }
  },
  watch: {},
  methods: {
    openPreview() {
      // this.$store.dispatch('app/toggleImagePreview', { url: this.url })
      this.$refs.imgPreview.clickHandler()
    },
    handleDelete() {
      this.$message.warning('确认删除!')
      this.$emit('delete')
    }
  }
}
</script>
<style lang="scss" scoped>
.xxyp-image {
  position: relative;
  display: inline-block;
  margin-right: 18px;
  vertical-align: top;
  border-radius: 4px;
  overflow: hidden;
  .el-image {
    width: 100%;
    height: 100%;
  }
  .delete {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    padding-right: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    text-align: right;
    color: #fff;
    background: rgba(89, 126, 247, 0.42);
    border-radius: 0px 0px 4px 4px;
    .svg-icon {
      margin-bottom: -2px;
      font-size: 24px;
    }
  }
  .mask {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    line-height: 14px;
    background: rgba(0, 0, 0, 0.35);
    .svg-icon {
      font-size: 24px;
    }
    .btn-preview {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -66%);
      width: 100%;
      span {
        display: block;
        margin-top: 5px;
      }
      margin-top: 8px;
      cursor: pointer;
    }
  }
  &:hover {
    .mask {
      display: block;
    }
  }
}
</style>
<style lang="scss">
.xxyp-image {
  .el-loading-mask {
    .el-loading-spinner {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 0;
      left: 0;
      margin-top: 0;
    }
  }
  .image-slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
  }
}
</style>
